<template>
	<div class="pay" v-if='data'>
		<router-link tag="header" to="/member/address?type=presell" class="pay-site layout bg-white pl30rem pr30rem pt30rem pb30rem mb20rem" v-if="pay_addRess">
			<div class="site-text flex_1 mr20rem">
				<p class="mb25rem">
					<strong class="fs34rem bold c333 mr25rem">{{ pay_addRess.username }}</strong>
					<span class="fs32rem c666">{{ pay_addRess.moblie }}</span>
				</p>
				<p class="fs30rem c666"><i class="iconfont icon-dingwe2i mr15rem"></i>{{ pay_addRess.pcd_address }}{{ pay_addRess.address }}</p>
			</div>
			<i class="iconfont icon-right2"></i>
		</router-link>
		<router-link tag="header" to="/member/address?type=presell" class="pay-site layout bg-white pl30rem pr30rem pt30rem pb30rem mb20rem" v-else-if="data[0].defaultAddress.address_id">
			<div class="site-text flex_1 mr20rem" v-if='data[0].defaultAddress'>
				<p class="mb25rem">
					<strong class="fs34rem bold c333 mr25rem">{{ data[0].defaultAddress.consigner }}</strong>
					<span class="fs32rem c666">{{ data[0].defaultAddress.mobile }}</span>
				</p>
				<p class="fs30rem c666"><i class="iconfont icon-dingwe2i mr15rem"></i>{{ data[0].defaultAddress.address }}</p>
			</div>
			<i class="iconfont icon-right2"></i>
		</router-link>
		<router-link tag="header" to="/member/address?type=presell" class="pay-site layout bg-white pl30rem pr30rem pt30rem pb30rem mb20rem" v-else>
			<span class="fs28rem">请选择收货地址</span>
			<i class="iconfont icon-right2"></i>
		</router-link>
		<section class="pay-content" v-for="items in data">	
			<h2 class="bg-white pt25rem pb25rem fs30rem c666 pl30rem pr30rem bold">{{ items.shop_name}}</h2>
			<div class="flex-left pl30rem pr30rem pt30rem pb30rem" v-for="item in items.content">	
				<img class="circle-8" :src="img_url + item.pic_cover" alt="">
				<div class="ml30rem flex_1">
					<p class="fs32rem c333 bold ellipsis-more mb10rem">{{ item.goods_name }}</p>
					<!-- <p class="fs26rem c999 mb20rem">颜色:黑色</p> -->
					<div class="price layout">
						<p>
							<strong class="fs34rem cxo-red-color bold">￥{{ item.price }}</strong>
							<del class="fs26rem c999 ml15rem">￥{{ item.promotion_price }}</del>
						</p>
						<span class="fs30rem c666">x{{ item.num }}</span>
					</div>
				</div>
			</div>
			<div class="layout pl30rem pr30rem pb10rem">
				<span class="c666">物流</span>
				<span class="c999">{{items.exp_cmy}}</span>
			</div>
		</section>
		<ul class="pl30rem pr30rem bg-white pay-list">
			<li class="border-b layout pt25rem pb25rem" @click="payMode = true" v-if="type=='2'&& !coupon_id">
				<strong class="fs30rem c333">付款模式</strong>
				<span class="fs30rem c666">{{ name }}<i class="iconfont icon-right2 green"></i></span>
			</li>
			<li class="border-b layout pt25rem pb25rem" @click='loadCoupon' v-if="pattern == '0'&& !coupon_id">
				<strong class="fs30rem c333">优惠券</strong>
				<div class="">
					<span class="fs30rem c666" v-if="ticketList">优惠券减免{{ coupon }}元</span>
					<i class="iconfont icon-right2"></i>
				</div>
			</li>
			<li class="border-b layout pt25rem pb25rem" v-if="coupon_id">
				<strong class="fs30rem c333">优惠券</strong>
				<div class="">
					<span class="fs30rem c666">{{data[0].discount}}</span>
					<i class="iconfont icon-right2"></i>
				</div>
			</li>
			<li class="border-b layout pt25rem pb25rem" @click="loadSurprise" v-show="type == '0'">
				<strong class="fs30rem c333">惊喜券</strong>
				<div class="fs30rem c666">
					<span  v-if="surprise_id">已选惊喜券</span>
					<i class="iconfont icon-right2"></i>
				</div>
			</li>
			<li class='border-b pt25rem pb25rem'>
				<strong class="fs30rem c333">买家留言：</strong>
				<input type="text" placeholder="建议留言前先与商家沟通确认" class='w60' v-model="words">
			</li>
			<li class="border-b layout pt25rem pb25rem" v-if="showApp != '1'">
				<strong class="fs30rem c333">支付方式</strong>
				<span class="fs30rem c666"><i class="iconfont icon-weixin mr10rem green"></i>微信支付<i class="iconfont icon-right2"></i></span>
			</li>
			<li class="border-b layout pt25rem pb25rem" v-if="type=='2' && pattern == '1'&& !coupon_id">
				<strong class="fs30rem c333">尾款通知号</strong>
				<span class="fs30rem c666">{{ data[0].defaultAddress.mobile }}</span>
			</li>
			<li class="border-b layout pt25rem pb25rem" v-if="showApp == '1'" @click="iOSpayment">
				<strong class="fs30rem c333">支付方式</strong>
				<div class="fs30rem c666">
					<span  v-if="payment_type == '1'"><i class="iconfont icon-weixin mr10rem green"></i>微信支付</span>
					<span  v-if="payment_type == '2'"><i class="iconfont icon-zhifubao mr10rem light-blue"></i>支付宝</span>
					<i class="iconfont icon-right2"></i>
				</div>
			</li>
			
		</ul>
		<div style="height:3.571428rem;"></div>
		<footer class="pay-footer bg-white fixed-b layout border-t">
			<div class="flex_1 mr40rem">
				<p class=" align-right fs30rem c333" v-if="pattern == '1'">实付款：<span class="fs34rem cxo-red-color">￥{{ earnestTotal }}</span></p>
				<p class=" align-right fs30rem c333" v-else>实付款：<span class="fs34rem cxo-red-color">￥{{ total }}</span></p>
			</div>
			<button class="fs34rem white cxo-red h100" @click="submit">立即支付</button>
		</footer>

		<!-- 使用优惠券 -->
		<popup v-model="popupShow" position="bottom" class="w100">
			<div class="coupon">
				<h2 class="fs34rem c333 bold align-center">选择优惠券<i class="fs28rem red" @click="judgeCoupon">确定</i></h2>
				<ul class="couponList">
					<li class="pl10rem pr30rem pt10rem pb10rem layout border-t" v-for="(item,index) in couponList">
						<div class="bg-coupon pb50rem pt50rem pl10rem pr10rem align-center">
							<p class="white mb10rem">￥{{ item.money }}元</p>
							<p class="white fs16rem">订单满{{ item.at_least }}元使用</p>
						</div>
						<div class="flex_1 mr20rem ml20rem">
							<p class="border-b pt20rem pb20rem c666 fs32rem">优惠券</p>
							<p class="fs24rem c999 mt20rem mb20rem">{{ item.start_time * 1000,'yyyy.MM.dd' | formatDate }}-{{item.end_time * 1000,'yyyy.MM.dd' | formatDate }}</p>
						</div>
						<div class="pretty p-icon p-round p-jelly mr20rem fs18">
							<input type="checkbox" v-model="item.is_checked" @change="selectCoupon(item,index,$event)">
							<div class="state p-primary">
								<i class="icon iconfont icon-gouxuan1 mdi mdi-check bg-red"></i>
								<label></label>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</popup>
		<!-- 惊喜券 -->
		<popup v-model="surprised" position="bottom" class="w100">
			<div class="coupon">
				<h2 class="fs34rem c333 bold align-center">选择惊喜券<i class="fs28rem red" @click="judgeSurpris">确定</i></h2>
				<ul class="couponList">
					<li class="pl10rem pr30rem pt10rem pb10rem layout border-t" v-for="item in surpriseList">
						<div class="bg-coupon pb30rem pt30rem pl10rem pr10rem align-center">
							<p class="white surprise auto fs32rem">惊喜券</p>
						</div>
						<div class="flex_1 mr20rem ml20rem">
							<p class="border-b pt20rem pb20rem c666 fs32rem">惊喜券</p>
							<p class="fs24rem c999 mt20rem mb20rem">{{ item.expri_start * 1000,'yyyy.MM.dd' | formatDate }}-{{item.expri_end * 1000,'yyyy.MM.dd' | formatDate }}</p>
						</div>
						<div class="pretty p-icon p-round p-jelly mr20rem fs18">
							<input type="checkbox" v-model="item.checked" change="selectSurpris(item,index,$event)">
							<div class="state p-primary">
								<i class="icon iconfont icon-gouxuan1 mdi mdi-check bg-red"></i>
								<label></label>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</popup>
		
		<!-- 付款模式 -->
		<popup v-model="payMode" position="bottom" class="w100">
			<div class="coupon">
				<h2 class="fs34rem c333 bold align-center">付款模式<i class="iconfont icon-guanbi" @click="payMode = false"></i></h2>
				<ul v-for="item in payModeList">
					<li class="pl30rem pr30rem pt20rem pb20rem border-t" @click="getEarnest">
						<label for="deposit" class="layout w100 h100">
							<div>
								<p class="fs30rem mb20rem">定金</p>
								<span class="fs24rem c999">您需要支付{{ item.earnest }}元</span>
							</div>
							<div class="pretty p-icon p-round p-jelly mr20rem fs18">
								<input type="radio" name="radio" id="deposit">
								<div class="state p-primary">
									<i class="icon iconfont icon-gouxuan1 mdi mdi-check bg-red"></i>
									<label></label>
								</div>
							</div>
						</label>
					</li>
					<li class="pl30rem pr30rem pt20rem pb20rem border-t" @click="getPayment">
						<label for="payment" class="layout w100 h100">
							<div>
								<p class="fs30rem mb20rem">全款</p>
								<span class="fs24rem red">付款将在预购价的基础上减{{ item.sale_price }}元</span>
							</div>
							<div class="pretty p-icon p-round p-jelly mr20rem fs18">
								<input type="radio" name="radio" id="payment" checked="checked">
								<div class="state p-primary">
									<i class="icon iconfont icon-gouxuan1 mdi mdi-check bg-red"></i>
									<label></label>
								</div>
							</div>
						</label>
					</li>
				</ul>
			</div>
		</popup>
		
		<!-- 支付方式 -->
		<popup v-model="payment" position="bottom" class="w100">
			<div class="coupon">
				<h2 class="fs34rem c333 bold align-center">支付方式<i class="iconfont icon-guanbi" @click="payment = false"></i></h2>
				<ul>
					<li class="pl30rem pr30rem pt30rem pb30rem border-t" @click="alipay">
						<label for="alipay" class="layout w100 h100">
							<div class="layout">
								<i class="iconfont icon-zhifubao" style="color:#1296db"></i>
								<p class="fs30rem ml20rem">支付宝</p>
							</div>
							<div class="pretty p-icon p-round p-jelly mr20rem fs18">
								<input type="radio" name="radio" id="alipay">
								<div class="state p-primary">
									<i class="icon iconfont icon-gouxuan1 mdi mdi-check bg-red"></i>
									<label></label>
								</div>
							</div>
						</label>
					</li>
					<li class="pl30rem pr30rem pt30rem pb30rem border-t" @click="wechat">
						<label for="wechat" class="layout w100 h100">
							<div class="layout">
								<i class="iconfont icon-weixin3" style="color:#00b90c"></i>
								<p class="fs30rem ml20rem">微信</p>
							</div>
							<div class="pretty p-icon p-round p-jelly mr20rem fs18">
								<input type="radio" name="radio" id="wechat">
								<div class="state p-primary">
									<i class="icon iconfont icon-gouxuan1 mdi mdi-check bg-red"></i>
									<label></label>
								</div>
							</div>
						</label>
					</li>
				</ul>
			</div>
		</popup>
	</div>
</template>

<script> 
import { getOrderDetail, getUseCouponList, getSurpriseList, createOrder, payOrder, getPayMode } from '@/api/shopping-cart';
import { Popup, Radio } from 'mint-ui';
import { formatDate,iosapp } from "@/utils";
import $toast from '@/utils/toast';

export default{
	components:{
		Popup,
		Radio
	},
	filters:
	{
		formatDate(time,fmt){
			let date = new Date(time);
			return formatDate(date,fmt);
		}  
	},
	computed:
	{
		total()
		{
			var total = 0;
			this.ticketList = '';
			this.logistics_id = '';
			for( var i in this.data )
			{
				total += this.data[i].total_price;
				if( this.data[i].coupon_ids != '0' && !this.coupon_id )
					this.ticketList += this.data[i].coupon_ids;

				this.logistics_id += this.data[i].shop_id + ':' + this.data[i].co_id + ',';

				for(var j in this.data[i].content)
				{
					if(this.goods_id == this.data[i].content[j].goods_id)
					{
						total -= this.data[i].content[j].price;
					}
				}
			}
			if( this.payModeList.length && this.pattern == '0'){
				total = total - Number(this.payModeList[0].sale_price);
			}

			return total.toFixed(2);
		},
		coupon()
		{
			var coupon = 0;
			for(var i in this.data)
			{
				coupon += this.data[i].optimal_coupon;
			}
			return coupon;
		},
		earnestTotal()
		{
			var earnestTotal = 0;

			for( var i in this.payModeList )
			{
				earnestTotal += Number(this.payModeList[i].earnest);
			}
			return earnestTotal;
		}
	},
	data()
	{
		return{
			payment       : false,
			payMode       : false,
			popupShow     : false,
			surprised     : false,
			data          : null,
			agree         : false,
			surprisAgree  : false,
			sign          : false,
			couponList    : [],
			surpriseList  : [],
			payModeList   : [],
			pay_addRess   : [],
			name          : '全款',
			ticketList    : '',
			coupon_ids    : '',
			surprise_id   : '',
			logistics_id  : '', 
			pattern       : '0',
			payment_type  : '',
			goods_id      : '',
			words         : '',
			coupon_id     : this.$route.query.coupon_id,
			fuid          : this.$route.query.fuid,
			goods_sku_ids : this.$store.state.sku_id,
			type          : this.$route.query.type,
			img_url       : process.env.IMG_URL,
			showApp       : window.sessionStorage.getItem('isapp'),
			uid           : window.localStorage.getItem('uid'),
		}
	},
	created()
	{
		this.loadData();
		this.loadPayMode();
		if(this.$store.state.pay_address_data)
			this.pay_addRess = this.$store.state.pay_address_data;
		else
			this.pay_addRess = '';
	},
	methods:
	{
		loadData()
		{
			this.popupShow = false;
			var params = {
				uid              : this.uid,
				goods_sku_string : this.goods_sku_ids,
				coupon_ids       : this.coupon_ids,
				fuid             : '',
				coupon_id        : this.coupon_id
			}
			getOrderDetail(params).then( res => {
				this.data = res.data;
			})
		},
		loadCoupon()
		{
			var params = {
				uid        : this.uid,
				shop_ids   : this.data[0].shop_id,
				goods_ids  : this.data[0].content[0].goods_id,
				coupon_ids : this.data[0].coupon_ids
			}

			getUseCouponList(params).then(res=>{
				if( res.data.length > 0){
					this.couponList = res.data;
					this.popupShow = true;
				}
				else
					$toast('暂无优惠券')
			})
		},
		loadSurprise()
		{
			getSurpriseList(this.uid,this.data[0].content[0].goods_id).then( res => {
				if( res.data.length > 0){
					this.surpriseList = res.data;
					this.surprised = true;
				}
				else
					$toast('暂无惊喜券')
			})
		},
		loadPayMode()
		{
			getPayMode(this.goods_sku_ids).then( res => {
				if( res.data.length > 0){
					this.payModeList =  res.data;
					// this.payMode = true;
				}
			})
		},
		judgeCoupon()
		{
			this.popupShow = false;
			for(let i in this.couponList){
            	if(this.couponList[i].is_checked){
            		this.coupon_ids = '';
            		break;
            	}
            	else
            	{
					this.coupon_ids = '-1';     		
            	}
            }
            this.loadData();
		},
		selectCoupon(item,index,e)
		{
			if(e.target.checked)
			{
				if(item.range_type == 1 || item.range_type == 0)
				{
					for(var i in this.couponList)
					{
						if(this.couponList[i].range_type == 1 || this.couponList[i].range_type == 0  )
						{
							this.couponList[i].is_checked = false;
						}
					}
					item.is_checked = true;
				}
				else
				{
					item.is_checked = true;
				}					
			}
			else
			{

				item.is_checked = false;
			}
			this.$set(this.couponList, index, item);
		},


		judgeSurpris()
		{
			this.surprised = false;
			for(let i in this.surpriseList){
            	if(this.surpriseList[i].checked){
					this.surprise_id = this.surpriseList[i].coup_id;
					this.goods_id  = this.surpriseList[i].goods_id;
            		break;
            	}
            	else{
            		this.goods_id  = '';
            		this.surprise_id = '';
            	}

            }
		},
		selectSurpris(item,index,e)
		{
			if(e.target.checked)
				item.checked = true;
			else
				item.checked = false;

			this.$set(this.surpriseList, index, item);
		},
		submit()
		{

			if(!this.data[0].defaultAddress.address_id)
			 	return $toast('请填写收货地址');


			this.ticketList = this.ticketList.substring(0,this.ticketList.length - 1);
			this.logistics_id = this.logistics_id.substring(0,this.logistics_id.length - 1);
			var params = {
				uid                  : this.uid,
				goods_sku_list       : this.$store.state.sku_id,
				surprise_id          : this.surprise_id ? this.surprise_id : '0',
				coupon_ids           : this.ticketList?this.ticketList : '-1',
				shipping_company_ids : this.logistics_id,
				goods_type           : this.type, 
				payment_type         : this.showApp == '1' ? this.payment_type : 0,
				pay_cate             : this.pattern,
				address_id           : this.pay_addRess.id ? this.pay_addRess.id : this.data[0].defaultAddress.address_id,
				fuid                 : this.fuid,
				coupon_id            : this.coupon_id,
				goods_id             : this.data[0].content[0].goods_id,
				words                : this.words
			}
			if(this.showApp && !this.payment_type)
			{
				this.payment = true;

				this.sign = true;
			}
			else if(this.showApp && this.payment_type)
			{
				iosapp('pay',params)
			}
			else
			{
				createOrder(params).then( res => {

					if (window.__wxjs_environment === 'miniprogram'){
						var params = '?timestamp='+ res.data.timestamp + '&nonceStr=' + res.data.noncestr
		                   +'&package='+ res.data.package +'&signType=MD5&paySign='+ res.data.sign +'&order_id='+ this.order_id +'&pType=0';

		                  //定义path 与小程序的支付页面的路径相对应
		                var path = '/pages/wxpay/wxpay'+params;

		                  //通过JSSDK的api使小程序跳转到指定的小程序页面
		                wx.miniProgram.navigateTo({url: path});
					}
					else if(res.code == 6)
						// 价钱为0
						this.$router.replace('/shopping/success?goods_id='+this.data[0].content[0].goods_id +'&fuid=' + this.uid)
					else	
						window.location.replace(res.data.link + '?order_id=' + res.data.order_id + '&uid=' + this.uid);
				})
			}
		},
		// 定金
		getEarnest()
		{
			this.pattern = '1';
			this.payMode = false;
			this.name = '定金';
		},
		// 全款
		getPayment()
		{
			this.pattern = '0';
			this.payMode = false;
			this.name = '全款';
		},
		alipay()
		{
			this.payment_type = 2;
			this.payment = false;
			this.sign && this.submit();
		},
		wechat()
		{
			this.payment_type = 1;
			this.payment = false;
			this.sign && this.submit();
		},
		iOSpayment()
		{
			this.payment = true;
			this.sign = false;
		}
	}	
}
</script>

<style lang="less">
.pay{
	background-color: #f5f5f5;
	.ellipsis-more{
		height: 3.5rem;
		line-height: 150%;
	}
	.pay-content{
		img{
			width: 185/28rem;
			height: 185/28rem;
			object-fit: cover;
		}
	}
	.pay-list{
		li{
			&:last-child{
				border-bottom: none;
			}
		}
	}
	.pay-footer{
		height: 100/28rem;
		line-height: 100/28rem;
		button{
			width: 30%;
		}
	}
	.coupon{
		h2{
			height: 110/28rem;
			line-height: 110/28rem;
			position: relative;
			i{
				position: absolute;
				right: 10%;
				top: 50%;
				transform: translate(50%,-50%);
			}
		}
		.couponList{
			li{
				.get-btn{
					height: 60/28rem;
					line-height: 60/28rem;
					width: 140/28rem;
				}
				.bg-coupon{
					width: 240/28rem;
					background: url(../../assets/img.png)no-repeat center /100% 100%;
				}
			}
		}	
	}
	.surprise{

		writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/  
		writing-mode: tb-lr
	}
}
</style>